<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>领养管理</title>
    <link rel="stylesheet" href="../assets/bootstrap.min.css">
</head>

<body>
<!-- 弹出框 -->
<div class="modal fade" id="addRolePop" tabindex="-1" aria-labelledby="addRolePopLa" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addRolePopLa">添加领养</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="d-grid gap-3" id="addRoleForm">
                    <input type="hidden" id="adoptId">
                    <input type="hidden" id="petId">
                    <input type="hidden" id="clientId">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label" for="adoptCode">订单号</label>
                        <div class="col-sm-8">
                            <input class="form-control" id="adoptCode" placeholder="订单号" disabled>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label" for="clientName">领养人</label>
                        <div class="col-sm-8">
                            <input class="form-control" list="clientOp" id="clientName" placeholder="领养人"
                                   autocomplete="off">
                            <datalist id="clientOp">
                            </datalist>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label" for="petName">宠物</label>
                        <div class="col-sm-8">
                            <input class="form-control" list="petOp" id="petName" placeholder="宠物"
                                   autocomplete="off">
                            <datalist id="petOp">
                            </datalist>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label" for="adoptInfo">备注</label>
                        <div class="col-sm-8">
                            <input class="form-control" id="adoptInfo" placeholder="备注" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label" for="adoptMoney">押金</label>
                        <div class="col-sm-8">
                            <input class="form-control" id="adoptMoney" type="number" autocomplete="off">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" data-bs-dismiss="modal" type="button" id="submitForm">确认提交</button>
            </div>
        </div>
    </div>
</div>
<!-- 搜索与添加与批量删除 -->
<nav class="navbar bg-light sticky-top">
    <div class="container-fluid">
        <form class="d-flex" role="search" onsubmit="return false">
            <input class="form-control me-2" type="search" placeholder="订单号" aria-label="Search" id="searchInput">
            <button class="btn btn-outline-success" type="submit" onclick="sss.getAll()">Search</button>
        </form>
        <div class="d-flex flex-row-reverse bd-highlight">
            <button type="button" class="btn btn-danger ms-1" id="delALL">批量删除</button>
            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addRolePop"
                    onclick="sss.addTit()">添加领养
            </button>
        </div>
    </div>
</nav>
<!-- 表格 -->
<table class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <th><input class="form-check-input ms-3" type="checkbox" id="checkALL"><label for="checkALL"></label></th>
        <th>领养单号</th>
        <th>领养人</th>
        <th>宠物</th>
        <th>备注</th>
        <th>押金</th>
        <th>申请时间</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tb-main">
    </tbody>
</table>
</body>
<script src="../assets/bootstrap.bundle.min.js"></script>
<script src="../assets/axios.js"></script>
<script src="z-myJS.js"></script>
<script type="text/javascript">
    // 建立对象
    const sss = new MixRole("adopt", "领养")
    window.onload = function () {
        sss.getAll();
        getOther("clientOp", "client")
        getOther("petOp", "pet/noClient")
        bindDataChange("client");
        bindDataChange("pet");
    }// 向表格类动态添加数据
    function getDataRow(h) {
        const row = document.createElement('tr');
        const adoptId = h["adoptId"]
        // 添加复选框
        row.appendChild(sss.check(adoptId));
        // 添加其他列
        h["createTime"] = h["createTime"].toString().replaceAll("T", ' ')
        const inAdoptGroup = ["未通过", "通过", "待审核"];
        h["inAdopt"] = inAdoptGroup[~~h["inAdopt"]]
        const group02 = ["adoptCode", "clientName", "petName",
            "adoptInfo", "adoptMoney", "createTime", "inAdopt"]
        for (let i = 0; i < group02.length; i++) {
            row.appendChild(sss.cell(h[group02[i]]))
        }
        // 审核按钮或者删除与修改按钮
        if (h["inAdopt"] === "待审核") {
            const adoptCell = document.createElement('td'),
                adoptBtn = sss.btn('通过', 'btn-primary'),
                refuseBtn = sss.btn('拒绝', 'btn-danger');
            adoptBtn.onclick = () => adoptOrRefuse(adoptId, true);
            refuseBtn.onclick = () => adoptOrRefuse(adoptId, false);
            adoptCell.appendChild(adoptBtn);
            adoptCell.appendChild(refuseBtn);
            row.appendChild(adoptCell);
        } else if (h["inAdopt"] === "通过") row.appendChild(sss.opCell(adoptId, h));
        else {
            const delCell = document.createElement('td'),
                btnDel = sss.btn('删除', 'btn-warning');
            delCell.appendChild(btnDel);
            //删除操作
            btnDel.onclick = async () => {
                if (await confirmDel()) axios.delete("adopt/" + adoptId).then(resp => sss.commonResp(resp));
            }
            row.appendChild(delCell)
        }
        return row;
    }//表单数据转json
    function formToJson() {
        const groupForm = ["adoptId", "petId", "clientId", "adoptCode", "adoptInfo", "adoptMoney"]//表单数据转json
        return sss.getVal(groupForm)
    }//json数据转表单
    function jsonToForm(h) {
        const groupForm = ["adoptId", "petId", "clientId", "adoptCode",
            "clientName", "petName", "adoptInfo", "adoptMoney", "createTime"]
        sss.setVal(groupForm, h)
    }//查找特定角色数据并赋予下拉框
    function getOther(dataId, role) {
        axios(role).then(resp => {
            const json = resp.data;
            document.getElementById(dataId).innerHTML = ''
            for (let i = 0; i < json.length; i++) {
                const {roleName, roleId} = json[i]
                document.getElementById(dataId).innerHTML += '<option value="' + roleId + '">' + roleName + '</option>'
            }
        })
    }//通过与拒绝
    function adoptOrRefuse(adoptId, isAdopt) {
        axios.put("adopt/adopt",{
            "adoptId":adoptId,
            "isAdopt":isAdopt
        }).then(resp => sss.commonResp(resp))
    }
</script>
</html>